<template>
  <div style="height: 100%">
    <div>
      <img
        src="@/assets/logo.png"
        alt="logo"
        style="
          width: 230px;
          height: 49px;
          margin-top: 15px;
          margin-left: 20px;
          cursor: pointer;
        "
        @click="to('/')"
      />
    </div>
    <!-- 主盒子 -->
    <div class="mainbox">
      <!-- 左盒子 -->
      <div class="left-contrainer">
        <img
          src="@/assets/login_background.png"
          class="login_background"
          style="width: 330px; height: 500px"
        />
      </div>
      <!-- 分割线 -->
      <div class="divider"></div>
      <!-- 右盒子 -->
      <div class="right-contrainer">
        <div class="title">个人注册</div>
        <div class="input-box">
          <el-input
            v-model="userName"
            placeholder="请输入用户名"
            size="large"
          />
        </div>
        <div class="input-box">
          <el-input
            v-model="email"
            placeholder="请输入注册邮箱"
            size="large"
            type="email"
          />
        </div>
        <div class="input-box">
          <el-input
            v-model="captcha"
            placeholder="请输入验证码"
            size="large"
            max="6"
            type="number"
          >
            <template #suffix>
              <span class="verify" @click="getCaptcha" v-if="!isShowCount"
                >获取验证码</span
              >
              <span class="verift-disable" v-else
                >{{ captchaCountdown }}秒可再次发送</span
              >
            </template>
          </el-input>
        </div>
        <div class="input-box">
          <el-input
            v-model="passWord"
            placeholder="请输入密码"
            size="large"
            show-password
            type="password"
            max="20"
          />
        </div>
        <div class="input-box">
          <el-input
            v-model="passWord2"
            placeholder="请再次输入密码"
            size="large"
            show-password
            type="password"
            max="20"
          />
        </div>
        <div class="login-btn" @click="submitRegister">注册</div>
      </div>
    </div>
    <div class="introduce">更快，更全面的深度学习可视化平台</div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import {sendCaptcha,register} from '@/api.js'
const router = useRouter();
const to = (url) => {
  router.push(url);
};
const userName = ref("");
const passWord = ref("");
const captcha = ref("");
const email = ref("");
const passWord2 = ref("");
const captchaCountdown = ref(60);
const isShowCount = ref(false);

const getCaptcha = async () => {
  if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)) {
    ElMessage({
      message: "请正确输入邮箱",
      type: "error",
    });
    return;
  }
  if (!email.value) {
    ElMessage({
      message: "请输入注册邮箱",
      type: "error",
    });
    return;
  }
  const res= await sendCaptcha(email.value);
  console.log(res);
  isShowCount.value = true;
  const captchaTimer = setInterval(() => {
    if (captchaCountdown.value > 0) {
      captchaCountdown.value--;
    }
    if (captchaCountdown.value == 0) {
      clearInterval(captchaTimer);
      captchaCountdown.value = 60;
      isShowCount.value = false;
    }
  }, 1000);
};
const submitRegister = async() => {
  if (userName.value.length == 0) {
    ElMessage({
      message: "请输入用户名",
      type: "error",
    });
  }
  if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)) {
    ElMessage({
      message: "请正确输入邮箱",
      type: "error",
    });
  }
  if (!passWord.value) {
    ElMessage({
      message: "请输入密码",
      type: "error",
    });
  }
  if (passWord.value != passWord2.value) {
    ElMessage({
      message: "两次密码输入不一致",
      type: "error",
    });
  }
  const res= await register(email.value,userName.value,passWord.value,captcha.value);
  console.log(res);
  if (res.success) {
    ElMessage({
      message: "注册成功",
      type: "success",
    });
  }
  else{
    ElMessage({
      message: "注册失败",
      type: "error",
    });
  }
};
</script>


<style scoped>
.mainbox {
  display: flex;
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  justify-content: center;
  justify-content: space-around;
  align-items: center;
}

.left-contrainer {
  width: 370px;
  height: 440px;
}

.login_background {
  width: 342px;
  height: 380px;
}

.introduce {
  margin-top: 60px;
  color: #000000;
  font-weight: 400;
  font-size: 22px;
  font-style: normal;
  text-decoration: none;
  text-align: center;
}

.divider {
  display: inline-block;
  width: 0px;
  height: 30em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  border-left: 1px var(--el-border-color) var(--el-border-style);
}

.right-contrainer {
}

.title {
  font-weight: 600;
  font-size: 25px;
}

.input-box {
  margin-top: 20px;
  width: 300px;
}

.login-btn {
  width: 130px;
  background-color: #2979ff;
  border-radius: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  margin: 0 auto;
  margin-top: 60px;
}

.verify {
  color: #4177f7;
  font-size: 12px;
  cursor: pointer;
}

.verift-disable {
  color: #999999;
  font-size: 12px;
  user-select: none;
}

/* number不显示箭头 */
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
  line-height: 1;
  -moz-appearance: textfield !important;
}
</style>